<style scoped>
.company>>>.layui-form-select {
    z-index: auto;
}
</style>

<template>
<div class="company">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>添加产品套装</legend>
    </fieldset>

    <form class="layui-form ">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">套装名称</label>
            <div class="layui-input-block">
                <select type="text" name="suitSpid" id="category" lay-filter="category" autocomplete="off" lay-verify="required" class="layui-select" lay-search>
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">品种</label>
            <div class="layui-input-block">
                <select type="text" v-model="productOne"  id="category1" lay-filter="productOne" autocomplete="off" lay-verify="required" class="layui-select" lay-search>
                    <option v-for="item in list" :value="item.guid" :key="item.guid">{{item.productname}}</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">单品名称</label>
            <div class="layui-input-block">
                <select type="text" name="childSpid" id="brand" lay-filter="productGuid" autocomplete="off" lay-verify="required" class="layui-select" lay-search>
                    <option value="">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-block">
                <input type="number" name="amount" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单价</label>
            <div class="layui-input-block">
                <input type="number" name="price" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
            </div>
        </div>
        <div style="height: 200px"></div>
    </form>
</div>
</template>

<script>
let qs = require('qs');
export default {
    name: 'addSalesSpecification',
    data() {
        return {
            productTypes: [],
            valuations: [{
                dicttext: "按件",
                dictkey: 1
            }, {
                dicttext: "按吨",
                dictkey: 2
            }, ],
            whinUnits: [],
            whinunit: '',
            productGuid: '',
            productOne: '',
            list: [],
            dataList:[]
        }
    },
    mounted() {
        let that = this;
        // this.getProductTypes();
        // this.getWhinUnit();
        this.getBaseInfo();
        // this.getBaseInfo1()
        // this.getListTo()
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            form.render();
            that.loadSalesspecification();
            form.on('submit(submit)', function (data) {
                console.log(data.field)

                let params = {
                    'entity.amount': data.field.amount,
                    'entity.childSpid': data.field.childSpid,
                    'entity.price': data.field.price,
                    'entity.suitSpid': data.field.suitSpid,
                }
                let loader = layer.load();
                $.ajax({
                    url: '/sales/Suitpack!save.action',
                    data: params,
                    type: "post",
                    dataType: "json",
                    success: function (res) {
                        if (res.msg == "success") {
                            that.toast("添加成功");
                            that.$parent.switchPage('SuitPack');
                        } else {
                            that.toast("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
                return false;
            });
            form.on('select(productOne)', function (data) {
                let product = data.value
                let params = {
                    // 'entity.flag': 1,
                    // 'entity.type': 2,
                    productGuid: product
                }
                $.ajax({
                    url: '/sales/Salesspecification!getSpecification.action',
                    type: "post",
                    dataType: "json",
                    data: params,
                    success: function (res) {
                        console.log("品种进行过滤单品", res)
                        $.each(res.spes, function (index, item) {
                            $('#brand').append(new Option(item.name, item.guid));
                            layui.form.render("select");
                        });
                    }
                });

            })
        });

    },
    updated() {
        layui.form.render('select');
        layui.form.render();
    },
    methods: {
        //加载用户权限信息
        loadSalesspecification: function () {
            let that = this;
            $.ajax({
                url: '/sales/Salesspecification!getBaseInfo.action',
                type: "post",
                dataType: "json",
                success: function (res) {
                    if (res.msg == "scucess") {
                        $.each(res.brands, function (index, item) {
                            $('#brandid').append(new Option(item.name, item.guid));
                        });
                        $.each(res.products, function (index, item) {
                            $('#productGuid').append(new Option(item.productname, item.guid));
                        });
                        that.list = res.products;
                        console.log('products:', res)
                        layui.form.render("select");
                    } else {
                        alert("系统错误");
                    }
                }
            });
        },
        getProductTypes: function () {
            this.$post('/sales/Sellform!findDict.action', qs.stringify({
                type: 91
            })).then(response => {
                if (response.statusText == "OK") {
                    this.productTypes = response.data;
                } else {
                    this.toastText('获取产品类型数据失败');
                }
            });
        },
        getListTo() {
            let that = this
            this.$post('/sales/Salesspecification!getBaseInfo.action').then(response => {
                if (response.data.msg == 'success') {
                    that.list = response.data.products;
                }
                // that.list = response.data.list
            });
        },
        getWhinUnit: function () {
            this.$post('/sales/Sellform!findDict.action', qs.stringify({
                type: 9
            })).then(response => {
                if (response.statusText == "OK") {
                    this.whinUnits = response.data;
                } else {
                    this.toastText('获取产品类型数据失败');
                }
            });
        },
        getBaseInfo: function (type = '') {
            let that = this;
            let params = {
                'entity.flag': 2
            }
            console.log("+++++++++", params)
            $.ajax({
                url: '/sales/Salesspecification!getSpecification.action',
                type: "post",
                dataType: "json",
                data: params,
                success: function (res) {
                    $.each(res.spes, function (index, item) {
                        $('#category').append(new Option(item.name, item.guid));
                        layui.form.render("select");
                    });

                }
            });
        },
        getBaseInfo1: function (type = '') {
            let that = this
            let params = {
                'entity.flag': 1,
                'entity.type': 2,
                productGuid: that.productGuid
            }
            $.ajax({
                url: '/sales/Salesspecification!getSpecification.action',
                type: "post",
                dataType: "json",
                data: params,
                success: function (res) {
                    console.log("单品", res)
                    $.each(res.spes, function (index, item) {
                        $('#brand').append(new Option(item.name, item.guid));
                        layui.form.render("select");
                    });
                }
            });
        }
    }
}
</script>
